<template>
  <scroll-view style="height: 100vh" scroll-y @scrolltolower="loadMore">
    <view class="vote-detail">
      <view class="vote-container">
        <!-- 自定义轮播组件 -->
        <VoteSwiper :imgList="voteData?.images" />
        <view class="vote-content">
          <view class="vote-header">
            <text class="vote-title"> {{ voteData?.tittle }}</text>
          </view>
          <view class="vote-content-box"> {{ voteData?.intro }} </view>
          <uni-card :is-shadow="true" is-full>
            <view class="vote-stats">
              <view class="vote-stats-item">
                <text class="number">{{ voteData?.pnum }}</text>
                <text class="text">参赛选手</text>
              </view>
              <view class="vote-stats-item">
                <text class="number">{{ voteData?.vnum }}</text>
                <text class="text">总投票数</text>
              </view>
              <view class="vote-stats-item">
                <text class="number">{{ voteData?.view }}</text>
                <text class="text">总访问量</text>
              </view>
            </view>
          </uni-card>
        </view>
        <view class="vote-footer">
          <template v-if="isVoteState === 0">
            <text class="text"> 活动开始时间为：</text>
            <text class="time">
              {{ formatDate(voteData?.startTime as string) }}
            </text>
          </template>
          <template v-else-if="isVoteState === -1">
            <text class="text"> 活动已结束：</text>
            <text class="time">
              {{ formatDate(voteData?.endTime as string) }}
            </text>
          </template>
          <template v-else>
            <text class="text"> 活动结束时间为：</text>
            <text class="time">
              {{ formatDate(voteData?.endTime as string) }}
            </text>
          </template>
        </view>
        <navigator
          :url="`/pages/vote/signUp?id=${query.id}`"
          class="participate-btn"
          :style="{ display: isVoteState !== -1 ? 'block' : 'none' }"
          open-type="navigate"
          hover-class="navigator-hover"
        >
          报名
        </navigator>
      </view>
      <Player ref="playerRef" :id="query.id"></Player>
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import Player from "./components/player.vue";
import { formatDate } from "@/utils/time";
import { getVoteDetailAPI } from "@/api/vote";
import { voteListResponseType } from "@/types/vote";
import { onLoad } from "@dcloudio/uni-app";
import { handleCoverToImageList } from "@/utils/vote";

onLoad(async () => {
  await getVoteDetail();
});

// 接收页面参数
const query = defineProps<{
  id: string;
}>();

const playerRef = ref<InstanceType<typeof Player>>();

const getVoteDetail = async () => {
  const res = await getVoteDetailAPI(query.id);
  voteData.value = res.data;
  voteData.value.images = handleCoverToImageList(voteData.value.cover);
};

const voteData = ref<voteListResponseType>();

//计算活动是否进行中或结束
const isVoteState = computed(() => {
  const now = new Date();
  const startTime = new Date(voteData.value?.startTime as string);
  const endTime = new Date(voteData.value?.endTime as string);
  if (now < startTime) {
    return 0;
  } else if (now > endTime) {
    return -1;
  } else {
    return 1;
  }
});

//加载更多数据
const loadMore = () => {
  playerRef.value?.loadMore();
};
</script>

<style scoped lang="scss">
.vote-content {
  padding: 20rpx 20rpx;
  .vote-header {
    line-height: 68rpx;
    .vote-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }
  }
  .vote-content-box {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 30rpx;
  }
  .vote-stats {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .vote-stats-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;

      .number {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
      }
      .text {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
      }
    }
  }
}
.vote-footer {
  text-align: center;
  margin-top: 30rpx;
  border: #27ba9b 1px solid;
  padding: 20rpx;
  border-radius: 10rpx;
  margin: 0 20rpx;
  .text {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
  }
  .time {
    font-size: 28rpx;
    color: #ff4949;
    margin-left: 20rpx;
  }
}

.participate-btn {
  width: 500rpx;
  background-color: #2979ff;
  color: #fff;
  font-size: 28rpx;
  border-radius: 10rpx;
  margin: 20rpx auto 0;
  cursor: pointer;
  text-align: center;
  padding: 16rpx 0;
}
</style>
